<template>
  <div class="history-check-record flex flex-column">
    <antd-form class="flex-fixed" :options="formOption" @submit="formSubmit" style="margin-bottom: 15px" />
    <common-table
      class="flex-auto-height"
      ref="table"
      :fetch-params="paramsData"
      :fetch="getDataAsync"
      :columns="columns"
      :show-toolbar="false"
      @vue:mounted="() => $refs.table.load()"
    >
      <template #avatar="{ text, scope }">
        <avatar :encryptConfirmed="true" :src="scope.head_img_url" style="width: 100%" />
      </template>
      <template #action="{ text, scope }">
        <span style="color: #62b8b1; cursor: pointer" @click="showDetails(scope)">详情</span>
      </template>
    </common-table>
  </div>
</template>

<script>
import AntdForm from '@gis/lib/components/antd-form/index.js';
import { getEnumText } from '@gis/lib/enums/index.js';
import { homestayWarningOccupancy } from '@gis/lib/api';
import Avatar from '@gis/lib/components/img-viewer/avatar-card.vue';

import { openPeopleDetailsDialog } from '../../../reality-people/people-details/peopleDetailsDialog.js';

export default {
  name: 'history-check-record',
  components: { AntdForm, Avatar },
  props: {
    details: { type: Object, default: () => {} },
  },
  data() {
    return {
      formData: {
        name: '',
      },
      columns: [
        {
          title: '头像',
          scopedSlots: { customRender: 'avatar' },
          align: 'center',
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          width: 60,
          customRender: (val) => getEnumText('gender', val),
        },
        {
          title: '入住时间',
          dataIndex: 'create_time',
        },
        {
          title: '退房时间',
          dataIndex: 'end_time',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
      formOption: [
        {
          component: 'a-input',
          field: 'name',
          props: { placeholder: '请输入姓名' },
          colSpan: 5,
          labelCol: { span: 0 },
          wrapperCol: { span: 24 },
        },
        // {
        //   component: 'a-input',
        //   field: 'where_from',
        //   props: { placeholder: '请输入出发点' },
        //   colSpan: 5,
        //   labelCol: { span: 0 },
        //   wrapperCol: { span: 24 },
        // },
        {
          component: 'a-range-picker',
          field: 'create_time_start,create_time_end',
          value: [],
          props: {
            showTime: true,
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            placeholder: ['请选择入住时间范围', '请选择入住时间范围'],
          },
          colSpan: 8,
          labelCol: { span: 0 },
          wrapperCol: { span: 24 },
        },
      ],
    };
  },
  computed: {
    paramsData() {
      const { create_time_start, create_time_end } = this.formData;
      return Object.assign({ room_id: this.details.room_id, status: 2 }, this.formData, {
        create_time_start: create_time_start,
        create_time_end: create_time_end,
      });
    },
  },
  methods: {
    formSubmit(data) {
      this.formData = data;
      this.$nextTick(() => {
        this.$refs.table.load();
      });
    },
    showDetails(details) {
      openPeopleDetailsDialog(details, ['7']);
    },
    async getDataAsync(params) {
      if (!params.room_id) return;
      const { data = {} } = await homestayWarningOccupancy(params);
      return {
        data: data.list,
        total: data.count,
      };
    },
  },
};
</script>

<style scoped lang="less">
.history-check-record {
  width: 100%;
  height: 100%;
}
</style>
